Bootstrap, stretching last column

Ask Time：2020-02-24T00:55:41 Author：jjablonski

I have this layout made with bootstrap each witdth is 4 units
This is what im trying to achive

Basically I want last elements to stretch to fill.
If there were only four elements last one should be full width.

My attempt

I tried to add flex-fill and flex-grow-1 to each column but it doesn't seem to change anything.

Can I achive this effect whithout js?

Code

<div class="container">
      <div class="d-flex justify-content-around row">
        <div class="my-2 col-md-4">
          <div class="card">
            <div class="card-body">
              <div class="card-title">One</div>
            </div>
          </div>
        </div>
        <div class="my-2 col-md-4">
          <div class="card">
            <div class="card-body">
              <div class="card-title">Two</div>
            </div>
          </div>
        </div>
        <div class="my-2 col-md-4">
          <div class="card">
            <div class="card-body">
              <div class="card-title">Three</div>
            </div>
          </div>
        </div>
        <div class="my-2 col-md-4">
          <div class="card">
            <div class="card-body">
              <div class="card-title">Four</div>
            </div>
          </div>
        </div>
        <div class="my-2 col-md-4">
          <div class="card">
            <div class="card-body">
              <div class="card-title">Five</div>
            </div>
          </div>
        </div>
      </div>
    </div>

Author:jjablonski，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/60364603/bootstrap-stretching-last-column

Aer0 :

Bootstrap comes up with a lot of different solutions to achieve multiple views. What you've been trying so far was almost correct. However, your last col ist currently just looking a bit wrong. You might exchange your last cols classes by the following.\n\n<div class=\"my-2 col flex-grow\">\n\nThis does simply 2 things.\n\n\nUsing col you're letting flexbox decide how much space to take\nAdding flex-grow you're telling flexbox to use and fill up any left space\n",

2020-02-25T12:43:42

Dimitar Spassov :

Assuming you want the default columns to have width 4, like col-md-4, I can suggest the following approach:\n\nDo not specify column width in the HTML and justify the content evenly:\n\n <div class=\"container\">\n <div class=\"d-flex justify-content-evenly row\">\n <div class=\"my-2 col\">\n <div class=\"card\">\n <div class=\"card-body\">\n <div class=\"card-title\">One</div>\n </div>\n </div>\n </div>\n <div class=\"my-2 col\">\n <div class=\"card\">\n <div class=\"card-body\">\n <div class=\"card-title\">Two</div>\n </div>\n </div>\n </div>\n <div class=\"my-2 col\">\n <div class=\"card\">\n <div class=\"card-body\">\n <div class=\"card-title\">Three</div>\n </div>\n </div>\n </div>\n <div class=\"my-2 col\">\n <div class=\"card\">\n <div class=\"card-body\">\n <div class=\"card-title\">Four</div>\n </div>\n </div>\n </div>\n <div class=\"my-2 col\">\n <div class=\"card\">\n <div class=\"card-body\">\n <div class=\"card-title\">Five</div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n\nThen set the minimum size of all columns:\n\n.my-2 {\n flex-basis: 33.3%;\n min-width: 33.3%;\n}\n",

2020-02-25T12:35:01

Kumar Ashutosh :

Use equal-width utility of bootstrap. Divide the area in 2 rows with same width (col-md-8 here) and then place as many divs of equal width.\n\nSample below:\n\n\r\n\r\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js\"></script>\r\n<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js\"></script>\r\n<link href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css\" rel=\"stylesheet\"/>\r\n<div class=\"container\">\r\n <div class=\"d-flex justify-content-around row\">\r\n\r\n \r\n <div class=\"row col-md-8\">\r\n\t\t <div class=\"my-2 col\">\r\n <div class=\"card\">\r\n <div class=\"card-body\">\r\n <div class=\"card-title\">One</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"my-2 col\">\r\n <div class=\"card\">\r\n <div class=\"card-body\">\r\n <div class=\"card-title\">Two</div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"my-2 col\">\r\n <div class=\"card\">\r\n <div class=\"card-body\">\r\n <div class=\"card-title\">Three</div>\r\n </div>\r\n </div>\r\n </div>\r\n\t </div>\r\n\r\n\t \r\n\t <div class=\"row col-md-8\">\r\n\t \r\n\t\t<div class=\"my-2 col\">\r\n <div class=\"card\">\r\n <div class=\"card-body\">\r\n <div class=\"card-title\">Four</div>\r\n </div>\r\n </div>\r\n </div>\r\n\t\t\r\n <div class=\"my-2 col\">\r\n <div class=\"card\">\r\n <div class=\"card-body\">\r\n <div class=\"card-title\">Five</div>\r\n </div>\r\n </div>\r\n </div>\r\n\t \r\n </div>\r\n </div>",

2020-02-25T12:16:48

Bootstrap, stretching last column

My attempt

Code